<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull @resize="onResize">
			<template #head>
				<cl-title-module
					title="今日报表"
					sub-title="以今日为单位进行汇总（当前登陆账号）"
					:columns="initColumns"
					:print="printParams"
					v-model="tableData.columns"
					@export-file="exportExcel"
				/>
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="品牌">
							<cl-select
								v-model="search.bra_id"
								placeholder="全部"
								clearable
								filterable
								multiple
								collapse-tags
								style="width: 230px"
							>
								<el-option
									v-for="item in bizRefData.brand"
									:key="item.bra_id"
									:label="item.bra_name"
									:value="item.bra_id"
								/>
							</cl-select>
						</cl-filter>
						<cl-filter label="时间">
							<cl-date-picker
								v-model="search.date"
								type="daterange"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								style="width: 230px"
								:clearable="false"
							/>
						</cl-filter>
					</cl-filter-group>
				</el-row>
			</template>

			<!-- 数据表格 -->
			<cl-table v-bind="tableData" id="dayReport"> </cl-table>
		</cl-pagefull>
	</cl-crud>
</template>
<script>
	import { exportExcel } from "@/utils/excel";
	import { cloneDeep } from "cl-admin/utils";
	import dayjs from "dayjs";
	export default {
		data() {
			return {
				printParams: {
					id: "dayReport",
					popTitle: "今日报表"
				},
				// 表格配置
				tableData: {
					"context-menu": ["refresh"],
					sortRefresh: false,
					columns: [],
					props: {
						showSummary: true,
						summaryMethod: this.getSummaries,
						maxHeight: 500
					}
				},
				initColumns: [
					{
						type: "index",
						label: "序号",
						align: "center",
						width: 50,
						fixed: true,
						disable: true
					},
					{
						label: "加微方式",
						prop: "name",
						sortable: true,
						minWidth: 130,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "行为数", prop: "action", sortable: true, width: 130 },
					{ label: "加微数", prop: "wechat", sortable: true, width: 120 },
					{
						label: "加微率",
						prop: "wechat_rate",
						sortable: true,
						minWidth: 120
					},
					{
						label: "新客定金数",
						prop: "deposit",
						sortable: true,
						minWidth: 120
					},
					{
						label: "退定金数",
						prop: "deposit_refuse_num",
						sortable: true,
						minWidth: 120
					},
					{
						label: "新客定金率",
						prop: "deposit_rate",
						sortable: true,
						minWidth: 120
					}
				],
				search: {
					date: [
						dayjs().startOf("day").format("YYYY-MM-DD"),
						dayjs().endOf("day").format("YYYY-MM-DD")
					],
					bra_id: [],
					biz_id: ""
				}
			};
		},
		computed: {
			bizRefData() {
				let biz_id = this.getCurrBiz();
				return this.getBizRefData(biz_id);
			}
		},
		created() {
			this.init();
			this.tableData.columns = cloneDeep(this.initColumns);
		},
		methods: {
			init() {
				let biz_id = this.getCurrBiz();
				this.getBizRefBrand(biz_id);
			},
			onLoad({ ctx, app }) {
				ctx.service(this.$service.preSale)
					.set("dict", {
						api: {
							page: "presaleperday"
						}
					})
					.done();
				app.refresh(this.search);
			},
			// crud刷新
			refresh() {
				this.$refs.crud.refresh({ page: 1, ...this.search });
			},
			onResize(h) {
				this.tableData.props.maxHeight = h;
			},
			// 表格合计
			getSummaries({ columns, data }) {
				let wechatSum = 0,
					depositSum = 0,
					actionSum = 0;
				return columns.map((column, index) => {
					if (index === 0) {
						return "合计";
					}
					if (index === 1) return "";
					if (column.property === "deposit_rate") {
						if (wechatSum) {
							let result = depositSum / wechatSum;
							return this.toFixed(result * 100) + "%";
						} else {
							return 0 + "%";
						}
					}
					if (column.property === "wechat_rate") {
						if (actionSum) {
							let result = wechatSum / actionSum;
							return this.toFixed(result * 100) + "%";
						} else {
							return 0 + "%";
						}
					}
					const values = data.map((item) => Number(item[column.property]));
					let sum = values.reduce((prev, curr) => {
						const value = Number(curr);
						if (!isNaN(value)) {
							return prev + curr;
						}
						return prev;
					}, 0);
					if (column.property === "wechat") {
						wechatSum = sum;
					}
					if (column.property === "deposit") {
						depositSum = sum;
					}
					if (column.property === "action") {
						actionSum = sum;
					}
					return this.toFixed(sum);
				});
			},
			// 导出EXCEl
			exportExcel() {
				exportExcel("#dayReport");
			}
		}
	};
</script>
<style lang="scss" scoped>
	::v-deep {
		.el-table--scrollable-x {
			.el-table__body-wrapper {
				z-index: 2;
			}
		}
	}
</style>
